<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>登录页面</title>
<link th:href="@{/css/login.css}" href="css/login.css" rel="stylesheet" type="text/css" media="all"/>
<script type="text/javascript" th:src="@{/js/jquery/jquery-3.3.1.js}" src="js/jquery/jquery-3.3.1.js" ></script>
<link rel="stylesheet" th:href="@{/css/cloudstyle.css}" href="css/cloudstyle.css"/>

<!-- layer -->
<link type="text/css" rel="stylesheet" th:href="@{/plug/layui/css/layui.css}"/>
<script type="text/javascript" th:src="@{/plug/layui/layui.all.js}"  src="plug/layui/layui.all.js" ></script>
<style>
input::-webkit-input-placeholder {
	color:#fff;
}
.div-a{ position:fixed; left:10px; top:20px; background:#00F;padding: 10px;color: #FFF;z-index: 999}  
.div-b{ position:fixed; right:10px; top:20px; background:#F00;padding: 10px;color: #FFF;z-index: 999}  
</style>

<script type="text/javascript" th:inline="javascript">
if(window != top){
	//session 失效 判断有没父页面，有，改变父页面地址
	top.location.href = location.href; 

}  
	
$(function(){

	$(".index_top_div").focus();
	
	$("#name").on("focus", function(){
		if($(this).attr("class") == "text_first"){
			$(this).removeClass("text_first");
			$(this).val("");
		}
	});
	
	$("#password").on("focus", function(){
		if($(this).attr("class") == "text_first"){
			$(this).parent().html("<input type='password' id='password' name='password' />");
			document.getElementById("password").focus();
		}
	});
});

function login(){

	if($("#param .text_first").length > 0){
		return false;
	}
	
	// 准备参数
	var param = new Object();
	param.username = $.trim($("#name").val());
	param.password = $.trim($("#password").val());
	
	if(param.username == ""){
		layer.alert('学号不可为空', {icon: 0});
		return false;
	}else if(param.password == ""){
		layer.alert('邮箱不可为空', {icon: 0});
		return false;
	}

	$.ajax({
		type:"POST",
		async:true,  //默认true,异步
		data:param,
		dataType:'json',
		url:"/login",
		success:function(data){
			if(data.result == "success"){
				window.location.href = "/user";
			}else{
				layer.alert('学号或邮箱错误', {icon: 2});
			}
	    },
	    error:function() {
	    	layer.alert('服务器错误,请联系开发人员！', {icon: 2});
	    }
	});
}

function key_down(num){
	if(num == 13) {
		login();
	}
}
</script>
</head>

<body onkeydown="key_down(event.keyCode);">
<div class="sky" style="position:absolute; width:100%; top:0px;height:100%;opacity:0.75;"></div>
<div class="login-form" style="position:relative;">
		<div class="login" >
			<span ><img src="imgs/hhit/hhit.png" alt="hhit"  style="position: relative; left: 44%; top:-15px; width: 150px; height: 150px;"/></span>
		</div>
		<h1><a  href='http://www.jack1996.com:8081/index' target='view_window' style='color:#FFF'>欢迎使用江苏海洋大学图书馆抢座系统</a></h1>
		<a href="/index">
			<div class="div-a">点我进入3.0版本</div>
		</a> 
		<a href="/jz">
			<div class="div-b">点我捐助服务器</div>   
		</a>
		<div class="login-top">
		<form>
			<div class="login-ic">
				<i class="layui-icon layui-icon-username" style="font-size: 30px; color: #fff;"></i>
				<input type="text"  placeholder="学号" id="name"/>
				<div class="clear"> </div>
			</div>
			<div class="login-ic">
				<i class="layui-icon layui-icon-password" style="font-size: 30px; color: #fff;"></i>
				<input type="text"  placeholder="常用邮箱" id="text" name="text"  />
				<div class="clear"> </div>
			</div>
		
			<div class="log-bwn">
				<input type="button"  id="login1" value="登录" onclick="login()">
			</div>
		</form>
	</div>
</div>
</body>
</html>